<template>
  <div class="run-container">
    <div class="run-core">

      <el-button type="primary" @click="saveBtn" style="margin:1rem 1rem 0 1rem">添加</el-button>

      <el-card class="run-card">
        <el-table :data="list" style="width: 100%;margin-bottom: 20px;" row-key="id"  :tree-props="{children: 'children'}">
          <el-table-column prop="id" label="编号" sortable min-width="20%"></el-table-column>
          <el-table-column prop="organization" label="组织" sortable min-width="20%"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" sortable min-width="20%"></el-table-column>

          <el-table-column  label="属于" align="center" min-width="20%">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.grade === 0 ">部门</el-tag>
              <el-tag v-else  type="info">岗位</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="20%" align="center">
            <template slot-scope="scope">
              <el-button size="mini"  type="primary" @click="pay(scope.row.id)" v-if="scope.row.grade === 1">岗位薪酬</el-button>
              <el-button size="mini"  type="primary" @click="editBtn(scope.row.id,scope.row.organization)">编辑</el-button>
              <el-button size="mini" @click="check(scope.row.id,scope.row.grade)">查看</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row.id,scope.row.grade)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-dialog title="组织架构" :visible.sync="flag" width="350px" :before-close="cancel">

        <el-form :model="org">
          <el-form-item label="组织" :label-width="'100px'">
            <el-input v-model="org.value" placeholder="请输入组织" style="width:10rem" @input="change($event)"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="添加" :visible.sync="save_flag" width="350px">
        <el-form ref="org_form"
                 :model="organization"
                 label-width="100px"
                 :rules="rules"
                 :show-message="false"
                 :hide-required-asterisk="true"
                 :validate-on-rule-change="false">

          <el-form-item label="组织名称" prop="organization">
            <el-input v-model="organization.organization" style="width:200px"></el-input>
          </el-form-item>

          <el-form-item label="所属等级" prop="grade">
            <el-select v-model="organization.grade" placeholder="请选择活动区域" @change="refresh">
              <el-option label="部门" value="0"></el-option>
              <el-option label="岗位" value="1"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="上级组织" v-if="grade_flag" prop="did" @change="refresh">
            <el-select v-model="organization.did" placeholder="请选择活动区域">
              <el-option :label="item.organization" :value="item.id" v-for="item in depts" :key="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="save">添加</el-button>
            <el-button @click="cancelSave">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>


      <el-drawer
        title="员工列表"
        :visible.sync="employees_flag"
        direction="rtl"
        size="50%">
        <el-table :data="employees">
          <el-table-column prop="code" label="编号" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="avatar" label="头像" min-width="6%" align="center">
            <template slot-scope="scope">
              <el-avatar :size="'medium'" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="email" label="邮箱" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="dept" label="部门" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="position" label="岗位" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="entryTime" label="入职时间" min-width="8%" align="center"></el-table-column>
        </el-table>
      </el-drawer>

    </div>
  </div>
</template>


<script>

import {delOrg, deptList, editOrganization, saveOrg, sel, structure} from "@/api/organization";
import path from "path";

export default {
  data(){
    return{
      employees:[],
      list:[],
      flag:false,
      save_flag:false,
      grade_flag:false,
      employees_flag:false,
      org:{},
      organization:{},
      rules:{
        organization:[
          { required: true, message: '组织名称不能为空', trigger: 'blur' },
        ],
        grade:[
          { required: true, message: '等级不能为空', trigger: 'blur' },
        ],
        did:[
          { required: true, message: '上级组织不能为空', trigger: 'blur' },
        ]
      },
      depts:[]
    }
  },

  computed:{
    grade(){
      return this.organization.grade
    }
  },

  watch:{
    grade:{
      handler(val){
        this.grade_flag = val === "1";
      },
      deep:true
    }
  },

  methods:{
    async orgStructure(){
      const {data:res} =await structure()
      this.list = res.data
    },
    async deptSelect(){
      const {data:res} =await deptList()
      this.depts = res.data
    },
    info(res) {
      if(res.code === 200){
        this.$message({message: res.message, type: 'success'});
      }else {
        this.$message.error(res.message);
      }
    },

    //编辑
    editBtn(id,organization){
      this.org.id = id
      this.org.value = organization
      this.flag = true
    },
    async edit(){
      const res = await editOrganization(this.org)
      this.info(res)
      await this.cancel()
    },
    async check(id,grade){

      const {data:res} =await sel(id,grade)
      this.employees = res.data.records
      this.employees_flag = true
      console.log(res)
    },
    async cancel(){
      this.flag = false
      this.org = {}
      await this.orgStructure()
    },

    change(e){
      this.$forceUpdate()
    },

    //添加弹框
    saveBtn(){
      this.save_flag = true
    },
    save(){
      this.$refs.org_form.validate((valid) => {
        if (valid) {
          saveOrg(this.organization).then(res => {
            console.log(res)
            this.info(res)
            this.cancelSave()
          })
        } else {
          console.log(valid)
          this.$message({
            message: '表单数据不能为空,数据校验未通过!',
            type: 'warning'
          });
          return false;
        }
      })
    },
    cancelSave(){
      this.organization = {}
      this.deptSelect()
      this.orgStructure()
      this.$refs.org_form.resetFields()
      this.save_flag = false
    },
     del(id,grade){
      this.$confirm('此操作将永久删除组织形式, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOrg(id,grade).then(res=>{
          this.info(res)
          this.orgStructure()
        })
      }).catch(() => {
        this.$message({type: 'info', message: '已取消删除'});
      });
    },

    pay(id){
      this.$router.push({path:'/pay/saveOrEdit/'+id})
    },


    //下拉框刷新
    refresh(){
      this.$forceUpdate()
    }
  },
  created() {
    this.orgStructure()
    this.deptSelect()
  }
}
</script>

<style lang="scss" scoped>
.run{
  &-core{
    margin:0 2rem 0 2rem;
  }
  &-card{
    margin-top: 2rem;
  }
}
</style>

<style scoped>

</style>
